<script setup lang="ts">
import { usePeerStore } from '@/stores/modules/peerjs'
import { onMounted, ref } from 'vue'

const peerStore = usePeerStore()
const remotePeerId = ref('')

onMounted(() => {
  peerStore.initPeer()
})

const connect = () => {
  if (remotePeerId.value) {
    let a = peerStore.connectToPeer(remotePeerId.value)
    console.log(a)
  }
}
</script>

<template>
  <div class="peer-manager">
    <h2>Peer Connection Manager</h2>

    <div v-if="peerStore.publicIP">
      <p>
        Your Public IP: <strong>{{ peerStore.publicIP }}</strong>
      </p>
      <p>
        Your Full Peer ID: <code>{{ peerStore.peer?.id || 'Generating...' }}</code>
      </p>
    </div>

    <div v-if="peerStore.error" class="error">
      {{ peerStore.error }}
    </div>

    <div class="status">
      Connection Status:
      <span :class="peerStore.status">{{ peerStore.status }}</span>
    </div>

    <div class="connect-box">
      <input v-model="remotePeerId" placeholder="Enter remote Peer ID" />
      <button @click="connect" :disabled="peerStore.status !== 'connected'">Connect</button>
    </div>

    <button @click="peerStore.sendData({ type: 'ping', time: Date.now() })">Send Test Data</button>
  </div>
</template>

<style scoped>
.connected {
  color: green;
}
.connecting {
  color: orange;
}
.disconnected {
  color: red;
}
.error {
  color: crimson;
}
.connect-box {
  margin: 20px 0;
}
</style>
